<!--
* description: 展车订单(查看)
* author: wangjuan
* createdDate:2020-11-12
-->
<template>
  <section class="editSetBelowAdd">
    <el-dialog
      v-dialogDrag
      :visible.sync="curPopupsVisible"
      :title="textMap"
      :append-to-body="true"
      width="70%"
      :close-on-click-modal="false"
      @close="closeEdit"
    >
      <dialogHeader
        slot="title"
        :title="textMap"
        :style-type="$store.state.app.dialogType"
      />

      <div class="filter-container filter-title">展车单信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList1" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents1.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds"
            :code="formField[comp.codeField]"
            :disabled="true"
            :o-fields="comp.oFields"
            :options="comp.options"
            :custom-obj="comp.customObj"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :data-to-object="comp.dataToObj"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">订单明细添加</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList2" :gutter="26">
          <component
            :is="comp.component"
            v-for="comp in tableComponents2.filter(o => o.isMust === true)"
            :ref="comp.isRequire ? comp.isRequire + comp.compKey : comp.compKey"
            :key="comp.compKey"
            :validrule="comp.validrule"
            :code-field="comp.codeField"
            :text-field="comp.textField"
            :popups-key="comp.compKey"
            :parent-fileds="comp.parentFileds"
            :code="formField[comp.codeField]"
            :disabled="true"
            :o-fields="comp.oFields"
            :options="comp.options"
            :custom-obj="comp.customObj"
            :is-require="comp.isRequire"
            :is-mul="comp.isMul"
            :span="comp.span || 8"
            :label-name="comp.labelName"
            :lookuptype="comp.lookuptype"
            :date-options-type="comp.dateOptionsType"
            @changeCode="getComponentCode"
            @focusCode="getFocusCode"
          />
        </el-row>
      </div>

      <div class="app-container app-container-table">
        <one-table-template
          ref="multipleTable"
          :dynamic-table-cols="tableCols"
          :dynamic-api-config="apiConfig"
          :dynamic-form-fields="formField"
          :dynamic-is-init-table="true"
          :dynamic-is-show-select="false"
          :dynamic-is-show-more-btn="true"
          :dynamic-table-defult-height="300"
        />
      </div>

    </el-dialog>
  </section>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { formMixins } from '@/components/mixins/formMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import api from '@/api/belowInfo'

export default {
  components: {
    dialogHeader: () => import('@/components/dialogHeader'),
    OneTableTemplate
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins, formMixins],

  props: {
    dynamicEditRowData: { type: Object, default: () => { return {} } },
    // 弹出是否显示
    popupsVisible: { type: Boolean, default: false }
  },

  data() {
    const viewPageCode = 'belowOrd-view'
    return {
      multable: 'multipleTable1',
      textMap: '查看订单',
      apiConfig: api.queryExhibitionCarProductionByDetail,

      tableComponents: this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
        : [],
      // 动态组件-查询条件
      tableComponents1:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
          this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          : [
            {
              compKey: 'compKey1',
              labelName: '批次编号：',
              codeField: 'transferOrderCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey2',
              labelName: '负责人姓名：',
              codeField: 'chargeMen',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isRequire: true,
              isMul: false,
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey3',
              labelName: '负责人电话：',
              codeField: 'chargePhone',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isRequire: true,
              isMul: false,
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey4',
              labelName: '备注：',
              codeField: 'remark',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true,
              span: 24
            }
          ],

      tableComponents2: [
        {
          compKey: 'compKey5',
          labelName: '车系：',
          codeField: 'carSeriesId',
          textField: 'carSeriesCn',
          component: () => import('@/components/org/LookupValue'),
          type: 'dropdownList',
          isRequire: true,
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey6',
          labelName: '基础车型：',
          codeField: 'carConfigId',
          textField: 'carConfigCn',
          component: () => import('@/components/org/LookupValue'),
          type: 'dropdownList',
          isRequire: true,
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey7',
          labelName: '选装包：',
          codeField: 'optionalPagId',
          textField: 'optionalPagName',
          component: () => import('@/components/org/LookupValue'),
          type: 'dropdownList',
          isRequire: true,
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey8',
          labelName: '车身颜色：',
          codeField: 'carColorId',
          textField: 'carColorName',
          component: () => import('@/components/org/LookupValue'),
          type: 'dropdownList',
          isRequire: true,
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey9',
          labelName: '内饰颜色：',
          codeField: 'carIncolorId',
          textField: 'carIncolorName',
          component: () => import('@/components/org/LookupValue'),
          type: 'dropdownList',
          isRequire: true,
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey10',
          labelName: '交付城市：',
          codeField: 'cityId',
          component: () => import('@/components/org/LookupValue'),
          type: 'dropdownList',
          isMust: true,
          isRequire: true,
          span: 8
        },
        {
          compKey: 'compKey11',
          labelName: '展车门店：',
          codeField: 'dlrFullName',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          isRequire: true,
          span: 8
        },
        {
          compKey: 'compKey12',
          labelName: '数量：',
          codeField: 'orderNum',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isRequire: true,
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey13',
          labelName: '交付门店：',
          codeField: 'deliveryDlrId',
          component: () => import('@/components/org/LookupValue'),
          type: 'inputText',
          isRequire: true,
          isMust: true,
          span: 8
        },
        {
          compKey: 'compKey14',
          labelName: '备注：',
          codeField: 'remark02',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          span: 24
        }
      ],

      tableCols: [
        {
          prop: 'releaseId',
          label: '主键ID',
          hidden: true,
          alwaysHidden: true
        },
        {
          prop: 'updateControlIdO',
          label: '并发控制ID',
          hidden: true,
          alwaysHidden: true
        },
        {
          prop: 'updateControlIdOd',
          label: '并发控制ID',
          hidden: true,
          alwaysHidden: true
        },
        {
          prop: 'transferOrderId',
          label: '展车主单id',
          hidden: true,
          alwaysHidden: true
        },
        {
          prop: 'transferOrderDId',
          hidden: true,
          alwaysHidden: true
        },
        {
          prop: 'carSeriesCn',
          label: '车系',
          align: 'center'
        },
        {
          prop: 'carConfigCn',
          label: '基础车型',
          align: 'center'
        },
        {
          prop: 'optionalPagName',
          label: '选装包',
          align: 'center'
        },
        {
          prop: 'carColorName',
          label: '车身颜色',
          align: 'center'
        },
        {
          prop: 'carIncolorName',
          label: '内饰颜色',
          align: 'center'
        },
        {
          prop: 'cityName',
          label: '交付城市',
          align: 'center'
        },
        {
          prop: 'deliveryDlrShortName',
          label: '交付门店',
          align: 'center'
        },
        {
          prop: 'dlrFullName',
          label: '展车门店',
          align: 'center'
        },
        {
          prop: 'orderNum',
          label: '数量',
          align: 'center'
        },
        {
          prop: 'remark02',
          label: '备注',
          align: 'center'
        }
      ],
      formField: {
        carSeriesId: '',
        carConfigId: '',
        optionalPagId: '',
        carColorId: '',
        carIncolorId: '',
        cityId: '',
        deliveryDlrId: '',
        dlrId: '',
        orderNum: '',
        carSeriesCn: '',
        carConfigCn: '',
        optionalPagName: '',
        carColorName: '',
        carIncolorName: '',
        cityName: '',
        deliveryDlrFullName: '',
        dlrFullName: '',
        remark02: '',
        updateControlIdO: '',
        updateControlIdOd: '',
        transferOrderDId: '',
        chargeMen: '',
        chargePhone: '',
        remark: '',
        transferOrderCode: '',
        transferOrderId: ''
      }
    }
  },

  created() {
    this.tableComponents = [...this.tableComponents1, ...this.tableComponents2]
  },

  methods: {
    closeEdit(type) {
      this.$emit('closeviewData', type)
    }
  }
}
</script>

<style lang="scss" scoped>
  .filter-title{
    font-size: 18px;
    font-weight: bolder;
  }
  .filter-container.filter-title::before{
    border-left: 4px solid #0075FF;
    padding-right: 10px;
    height: 20px;
    left: 0px;
    top: 4px;
  }
  /deep/.el-dialog{
    height: 720px;
  }
</style>
